﻿@page "/"

@using FluentUI.Demo.Shared.Pages.Home.Examples

<PageTitle>@App.PageTitle("Welcome")</PageTitle>


<FluentGrid Class="home" Justify="JustifyContent.FlexStart" Spacing="6">
    <FluentGridItem xs="12" sm="12" md="6">
        <h1>Welcome!</h1>
        <p>
            The Fluent UI Blazor library provides a robust and extensive set of <a href="https://blazor.net">Blazor</a> components. Some of those
            components are  wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the <a href="https://fluent2.microsoft.design/">Fluent Design System</a>
            or just make it easier to work with Fluent in general.
        </p>
        <p>
            To get up and running with the <code>Microsoft.FluentUI.AspNetCore.Components</code> library, see the &quot;Getting Started&quot; section below.
        </p>
        <h2>Introduction and getting started video</h2>
        <div class="youtube-responsive">
            <iframe src="https://www.youtube.com/embed/lUZ5mrg2Q8k" frameborder="0" allowfullscreen></iframe>
        </div>
        <p style="margin-top: 0.5rem;">
            More videos on our <a href="/Videos">videos page</a>
        </p>

    </FluentGridItem>
    <FluentGridItem xs="12" sm="12" md="6">
        <div class="demopanel" style="margin: 1rem 0; padding: 1.5rem; text-align: center">
            <p>
                This is the demo and documentation site for version <strong>@_version</strong> of the library. This version supports both
                <strong>.NET 8</strong> and <strong>.NET 9</strong>. Versions before v4.10.0 only support .NET 8.
            </p>
            <br />
            <p>
                The demo and documentation sites for previous version is also still available:<br />
                <a href="https://aka.ms/fluentui-blazor-v3/" target="_blank">Version 3.7.9</a><br />
                This version supports both .NET 6 (supported till November 12 2024) and .NET 7 (out of support since May 14 2024).
            </p>
        </div>
        <h2 id="whatsnew">What's new?</h2>
        <p>
            If you are already up-and-running and upgrading from an earlier version of the library, please go to the <a href="/WhatsNew">What's new</a> page
            for information on additions, fixes and (breaking) changes.
        </p>
        <h2 id="interactivity">Components & render modes</h2>
        <p>
            As described in the <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0" target="_blank"> Blazor documentation</a>:
        </p>
        <blockquote>
            By default, components use Static Server-side rendering (SSR). The component renders to the response stream and there is no interactivity.
        </blockquote>
        <p>
            A component inherits its render mode from its parent. So unless a render mode is specified on the app, page or component level, every
            component (including ours) is <em>statically rendered</em> on the server and <strong>will not be interactive</strong>. For the
            Fluent UI Blazor library this means most components will display correctly but <strong>will not offer</strong> complete, if any, functionality.
        </p>
    </FluentGridItem>
    <FluentGridItem xs="12" sm="12" md="6">
        <h2 id="getting-started">Getting Started</h2>
        <p>
            By far rhe easiest way to get started is by using our templates. Setting them up is quick and easy. See the <a href="/Templates">templates</a> page
            for instructions and usage.
        </p>
        <h3>Manual setup</h3>
        <p>
            To start using the Fluent UI Blazor components from scratch, you first need to install the main <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/">Nuget package</a>
            in the project you want to use the components. You can use the NuGet package manager in your IDE for that or use the following command when using a CLI:
        </p>
        <CodeSnippet>dotnet add package Microsoft.FluentUI.AspNetCore.Components</CodeSnippet>

        <p>
            Refer to the <a href="/CodeSetup">code setup</a> document to learn what else needs done to get up-and-running. This includes adding code to the
            <code>Program.cs</code> file so all necessary services are available and setup in the correct way.
        </p>
    </FluentGridItem>

    <FluentGridItem xs="12" sm="12" md="6">
        <h3>Scripts</h3>
        <p>
            As mentioned, we wrap the Fluent UI Web Components for some of our compnents. The needed script is included in the library and will
            be loaded for you automatically by using Blazor's built-in capabilities. You do not need to download or pull the script from a CDN manually.
        </p>
       <p>
            Please refer to the <a href="/CodeSetup#script">script section</a> on the Code setup page for infomation on how to manually add the script to your pages (which should normally not be necessary).
        </p>

        <h3>Styles</h3>
        <p>
            In order for this library to work as expected, it expects the composed scoped CSS file to be loaded. When using our templates, this will already
            be set up.
        </p>
        <p>
            Please refer to the <a href="/CodeSetup#styles">styles section</a> on the Code setup page for more information on:
            <ul>
                <li>Manually adding the style link</li>
                <li>Our <code>Reboot.css</code> file</li>
                <li>Possible configuration steps needed when combining the library with other CSS frameworks (like <i>Tailwind</i>)</li>
            </ul>

        </p>
    </FluentGridItem>

    <FluentGridItem xs="12" sm="12" md="8" >
        <h2 id="using-the-fluentui-web-components">Using the Fluent UI Blazor components</h2>
        <p>With the package installed, you can begin using the Fluent UI Blazor components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:</p>
        <CodeSnippet>@@using Microsoft.FluentUI.AspNetCore.Components</CodeSnippet>


        <blockquote>
            <p><strong>Tip</strong></p>
            <p>You can add <code>@@using Microsoft.FluentUI.AspNetCore.Components.</code> to the namespace collection in <code>_Imports.razor</code>, so you don't have to add it to every razor page that uses one of the components.</p>
        </blockquote>

        <DemoSection Title="Simple components example" Component="@typeof(HomeSimpleExample)" ShowDownloads=false HideAllButExample="true">
            <Description>
                <p>Here's a small example of a <code>FluentCard</code> with a <code>FluentButton</code> (which does not do anything) that uses Fluent's "Accent" appearance.</p>
            </Description>
            <ChildContent>
                <CodeSnippet>
                    @@using Microsoft.FluentUI.AspNetCore.Components.

&lt;FluentCard Width="350px" Height="250px"&gt;
    &lt;h2&gt;Hello World!&lt;/h2&gt;
    &lt;FluentButton Appearance=&quot;@@Appearance.Accent&quot;&gt;Click Me&lt;/FluentButton&gt;
&lt;/FluentCard&gt;
                </CodeSnippet>
                <p>Renders as:</p>
            </ChildContent>
        </DemoSection>
    </FluentGridItem>
    <FluentGridItem xs="12" sm="12" md="4">
        <h2 id="configuring-the-design-system">Configuring the Design System</h2>
        <p>
            The Fluent UI Blazor components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while
            automatically maintaining accessibility. This is accomplished through setting various &quot;Design Tokens&quot;.
        </p>
        <p>
            The library exposes all of the available Design Tokens, which you can use both from code as in a declarative way in your <code>.razor</code> pages. The different
            ways of working with design tokens are described on the <a href="/DesignTokens">design tokens</a> page.
        </p>

    </FluentGridItem>

    <FluentGridItem xs="12" sm="12" md="6">
        <h2 id="support">Support</h2>
        <p>
            The Microsoft Fluent UI Blazor library is an open-source project. The source code (including this demo site) is hosted in the <a href="https://github.com/microsoft/fluentui-blazor">fluentui-blazor</a>
            repository at GitHub.
        </p>
        <p>
            The library is <strong>not</strong> an official part of ASP.NET Core. This means the packages are <strong>not</strong> officially
            supported and we are not committed to shipping updates as part of any official .NET updates. It is built and maintained by Microsoft employees
            (and external contributors) and offers support, like most other open-source projects, on a <strong>best effort</strong> base through
            the GitHub repository <strong>only</strong>. No support is offered through any of Microsoft's official support channels.
        </p>
    </FluentGridItem>

    <FluentGridItem xs="12" sm="12" md="6">
        <h2 id="joining-the-community">Joining the Community</h2>
        <p>
            Looking to get answers to questions or engage with us in real-time?
            <ul>
                <li>Join the DotNetEvolution server and chat with us in real-time on <a target="_blank" href="https://discord.gg/M5cBTfp6J2">Discord</a>. You can also find us on <a target="_blank" href="https://app.gitter.im/#/room/#fluentui-blazor:gitter.im">Gitter</a>.</li>
                <li>Submit requests and issues on <a target="top" href="https://github.com/microsoft/fluentui-blazor/issues/new/choose">GitHub</a> <strong>only</strong>.</li>
                <li>Contribute by helping out on some of our recommended first issues on <a target="top" href="https://github.com/microsoft/fluentui-blazor/labels/community:good-first-issue">GitHub</a>.</li>
            </ul>
        </p>
        <p>We look forward to building an amazing open source community with you!</p>
    </FluentGridItem>
</FluentGrid>
